<template>
  <div class="header_top">
    <v-head />
    <!-- 内页banner -->
    <v-ban />

    <!-- 筛选 -->
    <div class="list_team p7090">
      <div class="container">
        <div class="ldshaixuan">
          <div
            v-for="(goods, goodsIndex) in listfilter"
            :key="goods.id"
            :class="'clearfix topnav_' + goodsIndex"
          >
            <div class="left">{{ goods.name }}:</div>
            <ul :class="boxshow ? 'active' : ''">
              <li
                @click="handleclick('', goods.type, '', '', goodsIndex)"
                class="default active active_"
              >
                全部
              </li>
              <li
                v-for="(type, typeIndex) in goods.list"
                :key="typeIndex"
                @click="
                  handleclick(
                    typeIndex,
                    goods.type,
                    type.id,
                    type.name,
                    goodsIndex
                  )
                "
                :class="'default active_' + typeIndex"
              >
                {{ type.name }}
              </li>
            </ul>
            <div class="fr right" @click="boxshow = !boxshow">
              <span
                class="el-icon-arrow-down"
                :class="boxshow ? 'active' : ''"
              ></span>
            </div>
          </div>
        </div>
        <div class="shaixuan">
          <ul class="clearfix">
            <li>
              <a
                href="javascript:;"
                @click="timeClick"
                :class="{ active: isActive === 1 }"
                >最新发布</a
              >
            </li>
            <li>
              <a
                href="javascript:;"
                @click="hotClick"
                :class="{ active: isActive === 2 }"
                >热门点击</a
              >
            </li>
            <li>
              <a
                href="javascript:;"
                @click="mostInvolved"
                :class="{ active: isActive === 3 }"
                >最多参加</a
              >
            </li>
          </ul>
        </div>
        <ul class="clearfix row">
          <li
            class="col-md-3 col-sm-6 activity"
            v-for="(item, index) in userList"
            :key="index"
          >
            <div>
              <router-link
                :to="{ path: '/hotshow', query: { id: item.id } }"
                class="bl over"
                ><img :src="$api + item.image" class="w100" alt=""
              /></router-link>
              <div class="content">
                <div class="data">
                  活动时间：{{ item.start_datetime | formatDate }}
                </div>
                <router-link
                  :to="{ path: '/hotshow', query: { id: item.id } }"
                  class="bl name line1"
                  >{{ item.title }}
                </router-link>
                <div class="address text line1">
                  <i class="iconfont icon-dizhi"></i>{{ item.city }}
                </div>
                <div class="people clearfix">
                  <div class="fl clearfix">
                    <div
                      class="tx_img"
                      :style="{
                        backgroundImage: 'url(' + $api + item.user.avatar + ')',
                      }"
                    ></div>
                    <div>{{ item.user.nickname }}</div>
                  </div>
                  <div class="fr">
                    <i class="iconfont icon-yanjing"></i> {{ item.views }}
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>

        <div class="ta mt40">
          <el-pagination
            layout="  prev, pager, next "
            :page-size="page_size"
            @current-change="current_change"
            :current-page.sync="currentPage"
            :pager-count="5"
            :total="info.total"
            v-if="info.pages > 1"
            @click="current_change(currentPage)"
          >
          </el-pagination>
          <el-empty description="暂无数据" v-if="info.total == 0"></el-empty>
        </div>
      </div>
    </div>

    <!-- 尾部 -->
    <v-foot />
  </div>
</template>

<script>
import vHead from "../../websitecom/Head.vue";
import vFoot from "../../websitecom/Foot.vue";
import vBan from "../../websitecom/Ban.vue";
import vErji from "../../websitecom/Erji.vue";
import { formatDate } from "../../assets/data.js";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default {
  components: {
    vHead,
    vFoot,
    vBan,
    vErji,
    swiper,
    swiperSlide,
  },
  // 时间戳
  filters: {
    formatDate(time) {
      time = time * 1000;
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm:ss");
    },
  },
  data() {
    return {
      isActive: 1,
      userList: [], //列表数组
      listfilter: [], //筛选分组
      // 筛选数组高亮
      activeLabel: {
        timer: "",
        city: "",
        status: "",
        cost: "",
      },
      currList: [], //筛选后存放内容的数组
      info: [], //数据
      page_size: 8, //每页多少数据
      currentPage: 1, //默认当前页为第一页
      start_time: "",
      end_time: "",
      title: "",
      city: "",
      is_free: "",
      team_id: "",
      is_end: "",
      sort: "id",
      keyword: "",
      type: "",
      boxshow: false,
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    },
  },
  beforeCreate: function () {
    document.getElementsByTagName("body")[0].className = "active";
    document.getElementsByTagName("html")[0].className = "active";
  },
  methods: {
    // 最新发布
    timeClick() {
      this.sort = "id";
      this.isActive = 1;
      this.currentPage = 1;
      this.getList();
    },
    // 热门点击
    hotClick() {
      this.sort = "views";
      this.isActive = 2;
      this.currentPage = 1;
      this.getList();
    },
    // 最多参加
    mostInvolved() {
      this.sort = "join_num";
      this.isActive = 3;
      this.currentPage = 1;
      this.getList();
    },
    getList() {
      var that = this;
      this.keyword = this.$route.query.keyword ? this.$route.query.keyword : "";

      this.$axios
        .get(
          this.$api +
            "//api/activity/index?page_no=" +
            this.currentPage +
            "&page_size=" +
            this.page_size +
            "&sort=" +
            this.sort +
            "&order=desc&search=" +
            "title:" +
            this.keyword +
            ";type:" +
            this.type +
            ";start_time:" +
            this.start_time +
            ";end_time:" +
            this.end_time +
            ";city:" +
            this.city +
            ";is_free:" +
            this.is_free +
            ";team_id:;is_end:" +
            this.is_end +
            ";"
        )
        .then(function (response) {
          that.userList = response.data.data.data;
          ////console.log(that.userList);
          that.info = response.data.data.page;
        })
        .catch(function (error) {
          //console.log(error);
        });
    },
    // currList
    filterList() {
      this.currList = this.userList.filter((shop) => {
        var currLabelArr = Object.keys(this.activeLabel).filter((str) => {
          if (this.activeLabel[str] != "") {
            return true;
          }
        });
        //console.log(currLabelArr);
      });
    },
    handleclick(typeIndex, type, id, name, goodsIndex) {
      //时间
      if (type == "start_time") {
        this.start_time = id[0] ? id[0] : "";
        this.end_time = id[1] ? id[1] : "";
      }

      //城市
      if (type == "city") {
        this.city = name;
      }

      //类型
      if (type == "type") {
        this.type = id;
      }

      //状态
      if (type == "is_end") {
        this.is_end = id;
      }

      //费用
      if (type == "is_free") {
        this.is_free = id;
      }


      this.currentPage = 1;
      $(".topnav_" + goodsIndex + " .default").removeClass("active");
      $(".topnav_" + goodsIndex + " .active_" + typeIndex).addClass("active");
      this.getList();
    },
    getFilter() {
      var that = this;
      this.$axios
        .get(this.$api + "//api/activity/allselect")
        .then(function (response) {
          that.listfilter = response.data.data;
          ////console.log(that.listfilter);
        })
        .catch(function (error) {
          //console.log(error);
        });
    },
    // 分页
    current_change(currentPage) {
      //改变当前页
      this.currentPage = currentPage;
      this.getList();
    },
  },
  created() {
    this.getList();
    this.getFilter();
  },
  mounted() {
    //设置滚动条指定
    document.documentElement.scrollTop = 0;
    this.keyword = this.$route.query.keyword ? this.$route.query.keyword : "";
  },
};
</script>

<style scoped>
[v-clock] {
  display: none;
}
.ldshaixuan ul li {
  cursor: pointer;
}
section {
  display: flex;
  flex-direction: column;
}
.box.active {
  height: auto;
}
/* 布局组件:start */
.view-warp {
  flex: 1;
  overflow: hidden;
  margin: auto;
  display: flex;
}

.view-box {
  overflow: auto;
  width: 1220px;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  margin: 0 -10px;
}

.view-flex {
  padding: 10px;
  cursor: pointer;
  transition: ease 0.5s;
  transform-style: preserve-3d;
}

.view-flex:hover {
  transform: translateY(-10px);
  transition: ease 0.5s;
}

.view-item {
  height: 100%;
  border: 1px solid red;
  display: flex;
}

.view-item > span {
  margin: auto;
}

.view-no-data {
  margin: auto;
}

/* 布局组件:end */

/* 过滤列表:start */
.demo {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 15px;
  min-height: 140px;
  height: auto !important;
  height: 140px;
}

.demo-warp {
  display: flex;
  max-width: 1200px;
  margin: auto;
  height: 100%;
  flex-direction: column;
  padding: 15px 0;
}

.demo-flex {
  display: flex;
  margin-bottom: 15px;
}

.demo-flex:last-of-type {
  margin-bottom: 0;
}

.demo-title {
  flex-basis: 70px;
  margin-top: 5px;
}

.demo-content {
  display: flex;
  flex: 1;
}

.demo-tab {
  flex: 1;
  margin-right: 15px;
  height: 35px;
  overflow: hidden;
}

.demo-tab span {
  display: inline-block;
  margin: 0 5px 15px 5px;
  cursor: pointer;
  padding: 5px 10px;
  color: #999999;
}

.demo-more {
  margin-top: 5px;
  cursor: pointer;
}

.demo-active {
  background-color: #09f;
  color: white !important;
  border-radius: 3px;
}

.demo-tab span:hover {
  background-color: #09f;
  color: white;
  border-radius: 3px;
}

.demo-hide {
  min-height: 35px;
  height: auto !important;
}
.activity {
  margin-bottom: 1.875rem;
}
</style>

 <style lang="less" scoped>
html.active {
  overflow-y: scroll !important;
  height: auto !important;
}

.ldshaixuan {
  background-color: #f7f8fa;
  padding: 2rem 2.25rem;
  margin-bottom: 3.125rem;

  > div {
    margin-bottom: 1.25rem;
  }

  > div:last-child {
    margin-bottom: 0;
  }

  .left {
    font-size: 1rem;
    line-height: 1.875rem;
    color: #000000;
    float: left;
    margin-right: 1.25rem;
  }

  ul {
    float: left;

    li {
      float: left;
      font-size: 1rem;
      color: #848484;
      line-height: 1.875rem;
      padding: 0 0.75rem;
      margin-right: 0.3125rem;

      input {
        background-color: #f7f8fa;
        border-radius: 3px;
        border: solid 1px #cecfd0;
        width: 7.875rem;
        text-align: center;
        color: #c7c7c7;
      }
    }

    li.active {
      background-color: #629af6;
      border-radius: 3px;
      color: #fff;
    }
  }

  input::-webkit-input-placeholder,
  textarea::-webkit-input-placeholder {
    color: #c7c7c7;
    font-size: 0.875rem;
  }

  input:-moz-placeholder,
  textarea:-moz-placeholder {
    color: #c7c7c7;
    font-size: 0.875rem;
  }

  input::-moz-placeholder,
  textarea::-moz-placeholder {
    color: #c7c7c7;
    font-size: 0.875rem;
  }

  input:-ms-input-placeholder,
  textarea:-ms-input-placeholder {
    color: #c7c7c7;
    font-size: 0.875rem;
  }
}

.list_team ul .activity {
  margin-bottom: 2.125rem;
}

.ldshaixuan .left {
  font-size: 1rem;
  line-height: 1.875rem;
  color: #000000;
  float: left;
  width: 4%;
}
.ldshaixuan ul.active {
  height: auto;
}
.ldshaixuan .right {
  width: 4%;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
  display: none;
}
.topnav_0 .right {
  display: block;
}
.ldshaixuan .right span {
  font-size: 18px;
}
.ldshaixuan .box.active {
  height: auto;
}
.ldshaixuan .right span {
  display: block;
  margin-top: 0.375rem;
  -webkit-transition: all 0.6s;
  transition: all 0.6s;
}
.ldshaixuan .right span.active {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  -webkit-transition: all 0.6s;
  transition: all 0.6s;
}
.ldshaixuan ul {
  float: left;
  width: 90%;
  height: 1.875rem;
  overflow: hidden;
}
@media (max-width: 990px) {
  .ldshaixuan ul {
    width: 85%;
  }
  .ldshaixuan ul li {
    margin-bottom: 5px;
    padding: 0 5px;
  }
  .ldshaixuan .left {
    width: 7%;
    margin-right: 0;
  }
  .ldshaixuan,
  .shaixuan {
    margin-bottom: 20px;
  }
  .list_team ul .activity {
    margin-bottom: 15px;
  }
  .ldshaixuan {
    padding: 15px;
  }

}
@media (max-width: 767px) {
  .ldshaixuan .left {
    width: 9%;
  }
  .ldshaixuan ul {
    width: 82%;
  }
  .ldshaixuan .left {
    width: 15%;
  }
  .ldshaixuan ul {
    width: 80%;
  }   .mt40 {
    margin-top: 10px;
  }

}
</style>
